<template>
	<div id="app" style="transform: scale(0.85);position: absolute;margin-top: -200px;margin-left: -500px;">

		<el-row style="padding: 20px;">
			<el-col :span="10">
				<el-input v-model="input" placeholder="请输入要查找的用户"></el-input>
			</el-col>
			<el-col :span="3">
				<el-button type="info" icon="el-icon-search" @click='searchBook'>搜索</el-button>
			</el-col>
			<el-col :span="2">
				<el-button type="info" @click='onaddBookVisible'>添加用户</el-button>
			</el-col>

		</el-row>

		<el-table stripe border :data="tableData" style="width: 100%">

			<el-table-column prop="userId" label="用户编号" width="180">
			</el-table-column>
			<el-table-column prop="userName" label="用户名" width="100">
			</el-table-column>
			<el-table-column prop="password" label="密码" width="80">
			</el-table-column>
			<el-table-column prop="indentity" label="身份" width="80">
			</el-table-column>
			<el-table-column prop="sex" label="性别" width="80">
			</el-table-column>
			<el-table-column prop="age" label="年龄" width="80">
			</el-table-column>
			<el-table-column prop="address" label="地址" width="80">
			</el-table-column>
			<el-table-column prop="userTelephone" label="电话号码" width="80">
			</el-table-column>


			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<el-button type="info" icon="el-icon-edit" @click="updateBook(scope.row)" style="transform: scale(0.8);">编辑信息</el-button>

					<el-button type="info" @click="deleteBook(scope.row)" style="transform: scale(0.8);position: absolute;margin-left: -10px;">删除</el-button>
				</template>

			</el-table-column>
		</el-table>


		<el-dialog title="添加用户" :visible.sync="addBookVisible" width="80%" :before-close="handleClose">
			<el-form ref="form" :model="form" label-width="80px">

				<el-form-item label="用户名:">
					<el-input v-model="form.userName"></el-input>
				</el-form-item>
				<el-form-item label="登录密码:">
					<el-input v-model="form.password"></el-input>
				</el-form-item>
				<el-form-item label="身份:">
					<el-input v-model="form.indentity"></el-input>
				</el-form-item>
				<el-form-item label="性别:">
					<el-input v-model="form.sex"></el-input>
				</el-form-item>
				<el-form-item label="年龄:">
					<el-input v-model="form.age"></el-input>
				</el-form-item>
				<el-form-item label="地址:">
					<el-input v-model="form.address"></el-input>
				</el-form-item>
				<el-form-item label="电话号码:">
					<el-input v-model="form.userTelephone"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onaddBook">添加</el-button>
					<el-button @click="onaddBookcancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog title="修改用户信息" :visible.sync="updateMedicineVisible" width="80%" :before-close="handleClose">
			<el-form :model="updateMedicineForm" label-width="80px">

				<el-form-item label="用户名:">
					<el-input v-model="updateMedicineForm.userName"></el-input>
				</el-form-item>
				<el-form-item label="登录密码:">
					<el-input v-model="updateMedicineForm.password"></el-input>
				</el-form-item>
				<el-form-item label="身份:">
					<el-input v-model="updateMedicineForm.indentity"></el-input>
				</el-form-item>
				<el-form-item label="性别:">
					<el-input v-model="updateMedicineForm.sex"></el-input>
				</el-form-item>
				<el-form-item label="年龄">
					<el-input v-model="updateMedicineForm.age"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input v-model="updateMedicineForm.address"></el-input>
				</el-form-item>
				<el-form-item label="电话号码">
					<el-input v-model="updateMedicineForm.userTelephone"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onUpdateCommit">修改</el-button>
					<el-button @click="onupdatecancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'app',
		mounted() {
			this.requestBook()
		},
		methods: {
			requestBook() {
				var that = this
				this.$axios.get("http://localhost:8088/xiaoxiang/findAllUser")
					.then(function(response) {
						that.tableData = response.data
					}).catch(function(error) {
						console.log(error)
					})
			},
			searchBook() {
				var that = this
				console.log(this.input)
				this.$axios.post('http://localhost:8088/xiaoxiang/findUserNameUser', {
						userName: this.input
					})
					.then(function(response) {
						console.log(response.data.data)
						that.tableData = response.data.data
					}).catch(function(error) {
						console.log(error)
					})
			},
			onaddBook() {
				var that = this
				console.log(this.form.medicineName)
				this.$axios.post('http://localhost:8088/xiaoxiang/adduser', {
						userName: this.form.userName,
						password: this.form.password,
						indentity: this.form.indentity,
						sex: this.form.sex,
						age: this.form.age,
						address: this.form.address,
						userTelephone: this.form.userTelephone,
						userId: this.form.userId
					})
					.then(function(response) {
						console.log()
						if (response.data.code == 0) {
							that.$message({
								message: response.data.msg,
								type: 'success'
							})
							that.addBookVisible = false
							that.requestBook()
						} else {
							that.$message.error(response.data.msg);
						}
					}).catch(function(error) {
						that.$message.error(error);
					})

			},
			onaddBookVisible() {
				this.addBookVisible = true
			},
			onaddBookcancel() {
				this.addBookVisible = false
			},
			updateBook(medicine) {
				console.log(medicine)
				this.updateMedicineForm = medicine
				this.updateMedicineVisible = true
			},
			onUpdateCommit() {
				var that = this
				this.$axios.post('http://localhost:8088/xiaoxiang/updatauser', {
						userName: this.updateMedicineForm.userName,
						password: this.updateMedicineForm.password,
						indentity: this.updateMedicineForm.indentity,
						sex: this.updateMedicineForm.sex,
						age: this.updateMedicineForm.age,
						address: this.updateMedicineForm.address,
						userTelephone: this.updateMedicineForm.userTelephone,
						userId: this.updateMedicineForm.userId

					})
					.then(function(response) {
						console.log()
						if (response.data.code == 0) {
							that.$message({
								message: response.data.msg,
								type: 'success'
							})
							that.updateBookVisible = false
							that.requestBook()
						} else {
							that.$message.error(response.data.msg);
						}
					}).catch(function(error) {
						that.$message.error(error);
					})
			},
			onupdateMedicineVisible() {
				this.updateMedicineVisible = true
			},
			onupdatecancel() {
				this.updateMedicineVisible = false
			},
			deleteBook(medicine) {
				var that = this
				this.deleteList = medicine
				console.log(this.deleteList.medicineId)
				this.$axios.post("http://localhost:8088/xiaoxiang/deleteuser", {
						userName: this.deleteList.userName
					})
					.then(function(response) {
						console.log(response.data.msg)
						if (response.data.code == 0) {
							that.$message(response.data.msg);
							that.requestBook()()
						} else {
							that.$message.error(response.data.msg);
						}
					}).catch(function(error) {
						console.log(error)
					})
			},
		},
		data() {
			return {
				tableData: [{
					userName: '',
					userId: '',
					password: "",
					indentity: "",
					sex: "",
					age: "",
					address: "",
					userTelephone: ""

				}],
				deleteList: [{
					userName: '',
					userId: '',
					password: "",
					indentity: "",
					sex: "",
					age: "",
					address: "",
					userTelephone: ""
				}],
				input: '',
				addBookVisible: false,
				updateBookVisible: false,
				form: {
					userName: '',
					userId: '',
					password: "",
					indentity: "",
					sex: "",
					age: "",
					address: "",
					userTelephone: ""
				},
				updateMedicineForm: {
					userName: '',
					userId: '',
					password: "",
					indentity: "",
					sex: "",
					age: "",
					address: "",
					userTelephone: ""
				}
			}
		}
	}
</script>
<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>
